/**
 * Description
 *
 * Creation Date 27/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { is, fromJS} from 'immutable';
import Template from '../../component/Template';
import { getHomeBanner } from '../../api/index';
import HeaderNav from '../../component/HeaderNav';
import FilterList from './FilterList';
import ProductList from '../../component/ProductList';

class Category extends Component {
	constructor(props) {
		super(props);
		this.state = {
			keyword: '',
			brandId: '',
			categoryId: '',
			genderId: '',
			sort: '',
			name:''
		}
	}

	componentWillMount() {
		let searchArr = (this.props.location.search.replace('?','')).split('&');
		this.fiterData(searchArr);
	}

	fiterData = (searchArr) => {
		let searchObj = {};
		searchArr.forEach(item => {
			let key = item.split('=')[0],
				value = item.split('=')[1];
			searchObj[key] = decodeURIComponent(value)
		});
		this.setState({
			keyword: '',
			brandId: '',
			categoryId: '',
			genderId: '',
			sort: '',
			name:''
		})
		this.setState({...searchObj})
	}

	componentWillUpdate(nextProps, nextState) {
		if(this.props !== nextProps) {
			let searchArr = (nextProps.location.search.replace('?','')).split('&');
			this.fiterData(searchArr);
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		return (
			<div>
				<HeaderNav title="category" content={this.state.name} history={this.props.history} />
				<FilterList {...this.state} />
				<ProductList keyword={this.state.keyword} brandId={this.state.brandId} categoryId={this.state.categoryId} genderId={this.state.genderId} sort={this.state.sort} />
			</div>
		)
	}
}

export default Template({
	id: 'category',
	component: Category
});
